<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>注册/登录页面</title>
		<style type="text/css">
			body{
				margin: 0px;
			}
			#main{
				position: absolute;
				width: 500px;
				height: 400px;
				left: 50%;
				top: 50%;
				margin-top: -200px;
				margin-left: -250px;
				border-radius: 5px;
			}
			#canvas{
				position: absolute;
				width: 100%;
				height: 100%;
				z-index: -1;
				background-image: linear-gradient(to right, #fbc2eb, #a6c1ee);
				opacity: 50%;
			}
			#menu{
				width: 504px;
				height: 50px;
			}
			#menu input{
				width: 249px;
				height: 100%;
				margin: auto;
				font-size: 20px;
				color: #8b8b8b;
				border-color: #8b8b8b;
				border-bottom-width: 0px;
				border-top-right-radius: 5px;
				border-top-left-radius: 5px;
			}
			.d{
				position: absolute;
				top: 50px;
				width: 100%;
				height: 350px;
				border-bottom-left-radius: 5px;
				border-bottom-right-radius: 5px;
				border-color: #8b8b8b;
				border-style: solid;
				visibility: hidden;
			}
			#login{
				font-size: 20px;
				background-color: rgba(240, 248, 255, 0.2);
			}
			.tip{
				display: inline-block;
				margin-left: 10px;
				width: 100px;
			}
			.input{
				display: inline-block;
				font-size: 20px;
			}
			.reset{
				width: 100px;
				height: 30px;
				margin: auto;
				margin-left: 10px;
			}
			.sumbit{
				width: 100px;
				height: 30px;
				margin: auto;
				margin-left: 100px;
			}
			#register{
				font-size: 20px;
				background-color: rgba(240, 248, 255, 0.2);
			}
		</style>
	</head>
	<body>
		<script src="js/loginPage.js" type="text/javascript"></script>
		<canvas id="canvas">
			
		</canvas>
		<div id="main">
			<div id="menu">
				<input type="button" onclick="setLogin()" value="登录"/>
				<input type="button" onclick="setRegister()" value="注册"/>
			</div>
			<div id="login" class="d">
				<form method="post" onsubmit="return check_login();">
					<p class="tip">账号：</p><input type="text" class="input" id="login-id" placeholder="请输入8位账号"/><br />
					<p class="tip">密码：</p><input type="password" class="input" id="login-password" placeholder="请输入10位密码"/><br />
					<input type="submit" class="sumbit"/> <input type="reset" class="reset"/>
				</form>
			</div>
			<div id="register" class="d">
				<form method="post" onsubmit="return check_register();">
					<p class="tip">账号：</p><input type="text" class="input" id="register-id" placeholder="请输入8位密码"/><br />
					<p class="tip">用户名：</p><input type="text" class="input" id="register-username" placeholder="请输入用户名"/><br />
					<p class="tip">密码：</p><input type="password" class="input" id="register-password" placeholder="请输入10位密码"/><br />
					<p class="tip">确认密码：</p><input type="password" class="input" id="register-repeat"placeholder="请与上次密码相同"/><br />
					<input type="submit" class="sumbit"/> <input type="reset" class="reset"/>
				</form>
			</div>
		</div>
	</body>
</html>